<template>
    <div class="assistant-aside" :class='{showNav:shownavmsg}'>
        <div class="aside-title">
            <router-link class='loginA' to=''>登陆</router-link>
            /
            <router-link class='loginA' to=''>注册</router-link>
        </div>
        <nav class="aside-nav">
            <ul>
                <li>
                    <router-link to='/' class='aside-nav-list'>
                        <i class="el-icon-s-home"></i>
                        <span>首页</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-position"></i>
                        <span>目的地</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-box"></i>
                        <span>行程助手</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-set-up"></i>
                        <span>穷游锦囊</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-shopping-cart-2"></i>
                        <span>穷游商城</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-chat-dot-round"></i>
                        <span>问答</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-s-custom"></i>
                        <span>论坛</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-s-check"></i>
                        <span>穷游出品</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-office-building"></i>
                        <span>酒店</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-s-promotion"></i>
                        <span>飞机</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-mobile-phone"></i>
                        <span>APP</span>
                    </router-link>
                </li>
            </ul>
        </nav>
        <section class="aside-section">
            <ul>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-chat-line-square"></i>
                        <span>写点评</span>
                    </router-link>
                </li>
                <li>
                    <router-link to='' class='aside-nav-list'>
                        <i class="el-icon-message"></i>
                        <span>提问题</span>
                    </router-link>
                </li>
            </ul>
        </section>
    </div>
</template>


<script type="text/javascript">
    export default {
        name:'assitantAside',
        props:['shownavmsg']
    }
</script>

<style type="text/css" lang="less">
    .assistant-aside{
        width:0;
        transition:all 0.5s;
        position:absolute;
        left:0px;
        overflow-x:hidden;
        overflow-y:auto;
        background-color: #2d3741;
        height:100vh;
        color:white;
        .aside-title{
            display:block;
            min-width:200px;
            padding:13px 10px 10px 10px;
            text-align: right;
            .loginA{
            color:white;
            }
        }
        .aside-nav{
            .link{
                text-decoration:none;
                color:white;
            }
            ul{
                list-style: none;
                padding:0;
                margin:0;
                li{
                    padding-left:15px;
                    border-top:1px solid #232d34;
                    background-color: #36424b;
                    .aside-nav-list{
                        display: block;
                        min-width:200px;
                        i{
                            margin-right:0.8em;
                        }
                        height:2.8em;
                        line-height: 3em;
                        font-size:1.2em;
                        color:white;
                    }
                }
                li:nth-child(even){
                    background-color: #364049;
                }
            }
        }
        .aside-section{
            ul{
                list-style: none;
                padding:0;
                margin:0;
                border-top:10px solid #232d34;
                li{
                    padding-left:15px;
                    border-top:1px solid #232d34;
                    .aside-nav-list{
                        display:block;
                        min-width:200px;
                        i{
                            margin-right:0.8em;
                        }
                        height:2.8em;
                        line-height: 3em;
                        font-size:1.2em;
                        color:white;
                    }
                }
            }
        }
        
    }
    .showNav{
        width:250px;
    }
</style>
